import { useState } from 'react'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Button } from '@/library/gallery/components/Button'
import { CenterPopup } from '@/library/gallery/components/CenterPopup'

export default (): any => {
  const [visible, setVisible] = useState(false)
  return (
    <DemoBlock title="中心弹出的弹层">
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        打开
      </Button>
      <CenterPopup
        visible={visible}
        onMaskClick={() => {
          setVisible(false)
        }}
      >
        <div
          style={{
            padding: '30px',
            textAlign: 'center',
          }}
        >
          Hello
        </div>
      </CenterPopup>
    </DemoBlock>
  )
}
